<template>
  <div class="container">
    <elm-header title="搜索"></elm-header>

    <div class="scroller">
      <!-- 商铺搜索区 -->
      <div class="search-box">
        <div class="search-wrap">
          <input class="search-input" v-model="keyword"
         placeholder="输入商家或美食名称">
          <van-icon v-if="keyword" class="icon-input-close" 
            name="cross" 
            @click="clearSearch"
          />
        </div>
        <div class="submit-btn" @click="handleShopSearch">提交</div>
      </div>
      <!-- 商铺列表 -->
      <div class="shop-list" v-if="searchShops.length">
        <p class="shop-list-header">商家</p>
        <div class="shop-item" 
          v-for="item in searchShops"
          :key="item.id"
          @click="navShop(item)"
        >
          <img :src="imgOrigin+item.image_path"  class="shop-item-img">
          <div class="shop-item-info">
            <p>{{item.name}}</p>
            <p>{{item.recent_order_num}}</p>
            <p>{{item.float_minimum_order_amount}}元起送 / 距离{{item.distance}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import elmHeader from '../../components/elmHeader'
import {getShopsByKeyword} from '../../api/restaurant'
import {mapState} from 'vuex'
export default {
  components:{
    'elm-header' : elmHeader,
  },
  data(){
    return {
      imgOrigin:'http://elm.cangdu.org/img/',
      keyword: '',
      searchShops:[],
      historyShops:[]
    }
  },
  computed:{
    ...mapState(['location']),
  },
  methods:{
    // 搜索商铺
    async handleShopSearch(){
      try {
        this.searchShops = await getShopsByKeyword({
          geohash: this.location.geohash,
          keyword: this.keyword
        })
        if(this.searchShops.length === 0){
          this.$toast('查无数据')
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 清空搜索关键字
    clearSearch(){
      this.keyword = ''
      this.searchShops = []
    },
    // 导航到shop页面
    navShop(item){
      this.$router.push({path:'/shop', query:{id:item.id}})
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../styles/mixin.scss';
@import '../../styles/var.scss';
.container{
  @include container;
  background-color: #f5f5f5;
  .scroller{
    @include scroller;
    margin-bottom: 50px;
    .search-box{
      display: flex;
      margin-top: .1rem;
      padding: .1rem .16rem;
      background-color: #fff;
      font-weight: 600;
      .search-wrap{
        display: flex;
        align-items: center;
        padding-right: .1rem;
        flex: 1;
        position: relative;
        .icon-input-close{
          position: absolute;
          right: .16rem;
          font-size: .26;
          font-weight: 700;
          height: .32rem;
          line-height: .32rem;
          padding: 0 .05rem;
        }
        .search-input{
          flex: 1;
          height: .32rem;
          line-height: .32rem;
          font-size: .15rem;
          border-radius: .03rem;
          @include grey-border;
          padding: 0 .06rem;
          background-color: #f5f5f5;
        }
      }
      .submit-btn{
        width: .8rem;
        color: #fff;
        font-size: .15rem;
        background-color: $primary;
        text-align: center;
        border-radius: .03rem;
        height: .32rem;
        line-height: .32rem;
      }
    }
    // 商铺列表
    .shop-list{
      .shop-list-header{
        height: .38rem;
        line-height: .38rem;
        background-color: #f5f5f5;
        font-size: .14rem;
        font-weight: 600;
        padding-left: .16rem;
      }
      .shop-item{
        display: flex;
        padding: .16rem;
        @include grey-bottom-border;
        .shop-item-img{
          width: .4rem;
          height: .4rem;
        }
        .shop-item-info{
          flex: 1;
          margin-left: .1rem;
          @include grey-bottom-border;
          p{
            margin-bottom: .08rem;
            @include text-ellipsis;
          }
        }
      }
    }
  }
}

</style>